<template>
  <div class="dashboard">
    <h1>欢迎来到仪表盘</h1>
    <p v-if="sn">设备 SN 号: {{ sn }}</p>
    <p>登录成功!</p>
    <p>这里是仪表盘页面,你可以在这里添加更多的内容。</p>
    <el-button type="primary" @click="logout">注销</el-button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'

export default defineComponent({
  name: 'DashboardPage',
  setup() {
    const router = useRouter()
    const sn = ref('')

    const fetchDeviceInfo = async () => {
      try {
        const token = localStorage.getItem('token')
        console.log('从本地存储中获取的 token:', token)

        if (!token) {
          console.log('没有找到 token,跳转到登录页面')
          router.replace('/')
          return
        }

        // 发送请求到服务器,获取设备信息
        const response = await axios.post('/api/protected_endpoint', null, {
          headers: {
            Authorization: `Bearer ${token}`
          }
        })
        console.log('请求设备信息的响应:', response)
        if (response.data.message) {
          console.log('响应中的消息:', response.data.message)
          // 从响应消息中提取 SN 号
          const snRegex = /设备SN号: (.+)/
          const match = response.data.message.match(snRegex)
          if (match && match[1]) {
            sn.value = match[1]
          }
        }
      } catch (error) {
        console.error('请求设备信息时发生错误:', error)
        if (axios.isAxiosError(error)) {
          if (error.response?.status === 401) {
            console.log('401 错误,跳转到登录页面')
            // 如果返回 401 错误,说明 token 无效,跳转到登录页面
            router.push('/')
          } else {
            // 如果是其他错误,在这里处理
            console.error('请求设备信息失败:', error)
          }
        } else {
          // 如果不是 Axios 错误,在这里处理
          console.error('未知错误:', error)
        }
      }
    }
    onMounted(fetchDeviceInfo)

    const logout = () => {
      console.log('注销登录')
      // 注销登录,清除本地存储中的 token 和 deviceRegistered 标志
      localStorage.removeItem('token')
      localStorage.removeItem('deviceRegistered')
      // 跳转到登录页面
      router.replace('/')
    }

    return {
      sn,
      logout
    }
  }
})
</script>
